<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  import { getuserdetail } from '@/api/syssetting';

  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
    formType: Object,
  });
  const { loading, setLoading } = useLoading();
  defineOptions({
    name: 'userAddSetting',
  });
  const userStore = useUserStore();

  const formData = ref({});
  const emit = defineEmits(['update:visible', 'refresh']);
  watch(
    () => props.params,
    async (newVal) => {
      if (!newVal.id) return; // 避免无id时触发
      setLoading(true);
      try {
        const res = await getuserdetail({ msg_id: newVal.id });
        Object.assign(formData.value, res.data);
      } finally {
        setLoading(false);
      }
    },
    { immediate: true, deep: true }
  );
  const handleSubmit = async () => {};
</script>

<template>
  <a-modal
    title="消息详情"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    ok-text="回复"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :disabled="true"
      :form-json="formType"
      :form-data="formData"
    ></pro-form>
    <template #footer>
      <div></div>
    </template>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .iscard {
    width: 360px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .cardBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cardItem {
    display: flex;
    align-items: center;
    color: #1d2129;
  }
</style>
